<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @search-reset="searchReset"
      >
        <template slot="nameSearch">
          <el-autocomplete
            style="width:100%;"
            class="inline-input"
            v-model="searchForm.name"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
           
          ></el-autocomplete><!-- 注释掉了 @select="handleSelect" -->
        </template>
        <template
          slot="feesTimeSearch"
        >
          <el-date-picker
            v-model="date.feesTime"
            type="datetimerange"
            range-separator="~"
            start-placeholder="缴费开始时间"
            end-placeholder="缴费结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>
        <template
          slot="enterInTimeSearch"
        >
          <el-date-picker
            v-model="date.in"
            type="datetimerange"
            range-separator="~"
            start-placeholder="入场开始时间"
            end-placeholder="入场结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>
        <template
          slot="comeOutTimeSearch"
        >
          <el-date-picker
            v-model="date.out"
            type="datetimerange"
            range-separator="~"
            start-placeholder="出场开始时间"
            end-placeholder="出场结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>
        <template
          slot="searchMenu"
          slot-scope="scope"
        >
          <el-dropdown>
            <el-button
              type="default"
              icon="el-icon-upload2"
            >
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="searchexport(scope.row,0)">详细导出</el-dropdown-item>
              <el-dropdown-item @click.native="searchexport(scope.row,1)">公司统计导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button
            :size="size"
            icon="el-icon-upload2"
            @click="searchexport(row)"
          >导出</el-button>-->
        </template>

      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, exportExcel, carCompany } from '@/api/crcar'
import { tableOption } from '@/const/crud/parking/index.js'
import { mapGetters } from 'vuex'
export default {
  name: 'crcar',
  components: {
  },
  data () {
    return {
      searchForm: {
        isBusinessCar: 0,
        carStatus: 0,
        type: 1
      },
      date: {
        in: [],
        out: [],
        feesTime: []
      },
      tableData: [],
      activeName: 0,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      tabActiveName: '0',
      restaurants: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
        addBtn: this.vaildData(this.permissions.car_crcar_add, false),
        delBtn: this.vaildData(this.permissions.car_crcar_del, false),
        editBtn: this.vaildData(this.permissions.car_crcar_edit, false)
      };
    }
  },
  mounted () {
    carCompany().then(({ data }) => {
      for (let key in data.data) {
        this.restaurants.push({ value: key, label: data.data[key] })
      }
    })
  },
  methods: {
    handleSelect(val){
      console.log(val);
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      var newresults = []
      results.forEach(item => {
        newresults.push({ value: item.label })
      })
      // 调用 callback 返回建议列表的数据
      // cb(results);
      cb(newresults)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
      };
    },
    // 导出功能
    searchexport (row, type, params) {
      this.tableLoading = true
      this.searchForm.isBusinessCar = this.activeName
      this.searchForm.carStatus = this.tabActiveName
      if (!type) {
        this.searchForm.type = 1
      } else {
        this.searchForm.type = 2
      }
      this.searchForm.carStatus = ''
      exportExcel(Object.assign({
        current: this.page.currentPage,
        size: this.page.total
      }, params, this.searchForm)).then(response => {
        if (!response) {
          return
        }
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(new Blob([response.data]))
        link.target = '_blank'
        let filename = response.headers['content-disposition']
        link.download = decodeURI(filename)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 进场车辆和出场车辆切换
    tabhandleClick () {
      this.getList(this.page)
      if (this.tabActiveName !== '4') {
        this.tableOption.column.splice(8, 1)
      } else {
        this.tableOption.column.splice(8, 1, {
          "type": "datetime",
          "search": true,
          "label": "出场时间",
          hide: false,
          "prop": "comeOutTime",
          format: "yyyy-MM-dd HH:mm:ss",
          valueFormat: "yyyy-MM-dd HH:mm:ss"
        })
      }
    },
    // tabs 选择tabs切换动作
    handleClick () {
      this.getList(this.page)
      if (this.activeName == '0') {
        this.tableOption.column[1].hide = true
        this.tableOption.column[2].hide = false
        this.tableOption.column[1].search = false
        this.tableOption.column[2].search = true
      } else {
        this.tableOption.column[1].hide = false
        this.tableOption.column[2].hide = true
        this.tableOption.column[1].search = true
        this.tableOption.column[2].search = false
      }
    },
    // 查看对应数据的详情
    Detailid (row) {
      this.$refs.Detail.init(row, this.activeName, this.tabActiveName)
    },
    // 手动出场
    ManualExit (row) {

    },
    updateList () {
      this.getList(this.page)
    },
    getList (page, params) {
      this.tableLoading = true
      this.searchForm.isBusinessCar = this.activeName
      this.searchForm.carStatus = this.tabActiveName === '0' ? '' : this.tabActiveName
      if (this.date.in && this.date.in.length == 2) {
        this.searchForm.startInTime = this.date.in[0]
        this.searchForm.endInTime = this.date.in[1]
      }
      if (this.date.out && this.date.out.length == 2) {
        this.searchForm.startOutTime = this.date.out[0]
        this.searchForm.endOutTime = this.date.out[1]
      }
      if (this.date.feesTime && this.date.feesTime.length == 2) {
        this.searchForm.feesTimeStart = this.date.feesTime[0]
        this.searchForm.feesTimeEnd = this.date.feesTime[1]
      }
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        if (loading) {
          loading();
        }
      });
    },
    handleSave: function (row, done, loading) {
      addObj(row).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        if (loading) {
          loading();
        }
      });
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.getList(this.page)
    },
    currentChange (current) {
      this.page.currentPage = current
      this.getList(this.page)
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      // 缴费时间转换
      if (this.searchForm.feesTime) {
        this.searchForm.feesTime = this.searchForm.feesTime + '-01 00:00:00'
      }
      this.getList(this.page, form)
      done()
    },
    refreshChange () {
      this.getList(this.page)
    },
    searchReset () {
      this.date.in = []
      this.date.out = []
      this.date.feesTime = []
      this.getList(this.page)
    }
  }
}
</script>
